<template>
    <UserLayout activeMenuName="article">
        <div class="dir-top-nowrap gap">
            <div class="dir-left-nowrap gap m-w-i-t-t-b">
                <template v-for="nav in navs" :key="nav.urlName">
                    <NuxtLink class="m-w-i-t-t-i" :class="[{ 'active': props.activeNavName === nav.name }]"
                        :to="{ name: nav.urlName, params: $route.params }">
                        {{ nav.title }}
                    </NuxtLink>
                </template>
            </div>
            <slot></slot>
        </div>
    </UserLayout>
</template>


<script setup lang="ts" name="UserArticleLayout">
import { UserLayout } from "#components";

type NavName = 'cos' | 'drawing' | 'writing' | 'daily'
type Nav = {
    title: string
    name: string
    urlName: string
}

const props = withDefaults(defineProps<{
    /**选中的导航 */
    activeNavName?: NavName
}>(), {})

const navs: Nav[] = [
    {
        title: 'COS',
        name: 'cos',
        urlName: 'user-userId-article-cos',
    },
    {
        title: '绘画',
        name: 'drawing',
        urlName: 'user-userId-article-drawing',
    },
    {
        title: '写作',
        name: 'writing',
        urlName: 'user-userId-article-writing',
    },
    {
        title: '日常',
        name: 'daily',
        urlName: 'user-userId-article-daily',
    },
]
</script>

<style lang='scss' scoped>
.m-w-i-t-t-b {
    border-radius: 8px;
    background-color: #fff;
    padding: 0 30px;
    gap: 60px;

    .m-w-i-t-t-i {
        position: relative;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;

        &::after {
            content: '';
            position: absolute;
            height: 3px;
            width: 100%;
            background-color: #f9688f;
            left: 0;
            bottom: 0;
            transform: scaleX(0);
            transition: transform .4s;
        }

        &.active {
            color: #f9688f;

            &::after {
                transform: scaleX(1);
            }
        }
    }
}
</style>